<template>
  <!-- <div> -->
    <!-- 筛选条件卡片 -->
    <!-- <el-card class="optionTable" shadow="hover"> -->
      <!-- 专业筛选 -->
      <!-- <div>
        <el-col>
          <span style="margin-right:10px">专业</span> -->
          <!-- 专业单选组，绑定筛选状态 -->
           <!-- 双向绑定专业选择值 -->
            <!-- 单选按钮尺寸 -->
          <!-- <el-radio-group 
            v-model="tableOptions.majorChoice"  
            size="large"                       
          > -->
            <!-- 遍历专业选项生成单选按钮 -->
              <!-- 循环遍历专业选项数组 -->
                <!-- 唯一键值 -->
                  <!-- 显示标签 -->
                      <!-- 选项值 -->
                       <!-- 点击触发筛选更新 -->
            <!-- <el-radio-button 
              v-for="item in majorTable"      
              :key="item.value"               
              :label="item.label"             
              :value="item.value"           
              @click="handleChange"            
            />
          </el-radio-group>
        </el-col>
      </div> -->

      <!-- 职业筛选 -->
      <!-- <div>
        <el-col>
          <span style="margin-right:10px">职业</span> -->
          <!-- 职业单选组，绑定筛选状态 -->
           <!-- 双向绑定职业选择值 -->
              <!-- 单选按钮尺寸 -->
          <!-- <el-radio-group 
            v-model="tableOptions.jobChoice"  
            size="large"                     
          > -->
            <!-- 遍历职业选项生成单选按钮 -->
             <!-- 循环遍历职业选项数组 -->
               <!-- 唯一键值 -->
                 <!-- 显示标签 -->
                    <!-- 选项值 -->
                       <!-- 点击触发筛选更新 -->
            <!-- <el-radio-button 
              v-for="item in jobTable"         
              :key="item.value"               
              :label="item.label"             
              :value="item.value"            
              @click="handleChange"          
            />
          </el-radio-group>
        </el-col>
      </div>
    </el-card> -->

    <!-- 筛选结果展示卡片 -->
    <!-- <el-card class="optionTable" shadow="hover">
      <h3>筛选结果</h3>
      <el-row :gutter="20">
        <el-col :span="22" style="padding: 0px;margin: 0;"> -->
          <!-- 遍历显示筛选后的结果列表 -->
            <!-- 循环遍历结果数组 -->
             <!-- 唯一键值 -->
              <!-- 内边距 -->
          <!-- <div 
            v-for="data in list"          
            :key="data.id"                
            style="padding:10px;"          
          > -->
           <!-- 卡片内容区无内边距 -->
            <!-- 鼠标悬停显示阴影 -->
             <!-- 点击跳转详情页 -->
            <!-- <el-card 
              :body-style="{ padding: '0px' }" 
              shadow="hover"                   
              @click="handleChangepage(data.id)" 
            >
              <div style="padding: 14px;float:left;"> -->
                <!-- <span>{{ data.title }}</span>  显示结果标题 -->
              <!-- </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>-->

</template> 
<!-- <script setup>
// 引入Vue组合式API
import { ref, reactive } from 'vue';
// 引入Vuex状态管理
import { useStore } from 'vuex';
// 引入HTTP请求库
import axios from 'axios';
// 引入路由
import router from '@/router';

// 获取Vuex存储实例
const store = useStore();

// 结果列表响应式数据（模拟数据，实际需从接口获取）
let list = ref([]);
list.value = [
  { 
    id: 1, 
    title: "就业1", 
    content: "就业1", 
    category: "1", 
    author: "1", 
    job: "job1", 
    major: "major1" 
  },
  { 
    id: 2, 
    title: "面试1", 
    content: "面试1", 
    category: "2", 
    author: "2", 
    job: "job1", 
    major: "major1" 
  },
  { 
    id: 3, 
    title: "简历1", 
    content: "简历1", 
    category: "3", 
    author: "3", 
    job: "job2", 
    major: "major2" 
  }
];

// 专业选项配置
const majorTable = [
  { label: '不限', value: '' },        // 空值表示不筛选
  { label: '专业1', value: 'major1' },
  { label: '专业2', value: 'major2' }
];

// 职业选项配置
const jobTable = [
  { label: '不限', value: '' },        // 空值表示不筛选
  { label: '职业1', value: 'job1' },
  { label: '职业2', value: 'job2' }
];

// 筛选条件响应式数据模型
let tableOptions = reactive({
  majorChoice: '',  // 选中的专业（默认'不限'）
  jobChoice: ''     // 选中的职业（默认'不限'）
});

/**
 * 筛选条件变更处理函数
 * 延迟10ms触发数据获取，避免高频请求
 */
const handleChange = () => {
  setTimeout(() => {
    getData(); // 调用数据获取函数
  }, 10);
};

/**
 * 数据获取函数（待完善）
 * 功能：根据筛选条件从后端获取数据并更新列表
 */
const getData = async () => {
  // 实际开发中需补充以下逻辑：
  // 1. 构造筛选参数（如majorChoice和jobChoice）
  // 2. 调用axios发送请求（如axios.get('/api/data', { params: tableOptions })）
  // 3. 将返回数据赋值给list.value
  // 示例：
  // const response = await axios.get('/api/filtered-data', {
  //   params: {
  //     major: tableOptions.majorChoice,
  //     job: tableOptions.jobChoice
  //   }
  // });
  // list.value = response.data.data;

  // 目前仅作为占位逻辑（可展示模拟数据）
  console.log('筛选条件:', tableOptions);
};

/**
 * 跳转详情页处理函数
 * @param {number} id - 数据项ID
 */
const handleChangepage = (id) => {
  router.push(`/detail/${id}`); // 跳转到详情页（需根据实际路由调整路径）
};
</script> -->
<!-- 
<style scoped>
.optionTable {
  margin: 30px; /* 卡片外边距，控制布局间距 */
}

.el-col {
  margin: 10px; /* 列容器外边距，调整筛选按钮间距 */
}
</style> -->